<script setup>
  import {ref} from 'vue'
  //json数组
  const stus = ref([
      //json对象
    {id: 1001,name: '张三',age: 18,address: '四川成都'},
    {id: 1002,name: '张三丰',age:98, address: '武当'},
    {id: 1003,name: '杨过',age:28, address: '活私募'}
  ])
</script>

<template>
    <table width="100%" border="1">
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>地址</td>
      </tr>
  <!-- stu代表的是临时变量  ；stus是一个json数组    -->
      <tr v-for="stu in stus">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.age}}</td>
        <td>{{stu.address}}</td>
      </tr>
    </table>
  <table width="100%" border="1">
    <tr>
      <td>序号</td>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>地址</td>
    </tr>
    <!-- stu代表的是临时变量  ；stus是一个json数组,index是索引，从0开始    -->
    <tr v-for="(stu,index) in stus">
      <td>{{index+1}}</td>
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
</template>

<style scoped>

</style>